<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.min.css">
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			
			.mui-bar .mui-pull-left .mui-icon {
				padding-right: 5px;
				font-size: 28px;
			}
			
			.mui-bar .mui-btn {
				font-weight: normal;
				font-size: 17px;
			}
			
			.mui-bar .mui-btn-link {
				top: 1px;
			}
			
			.mui-content img {
				width: 100%;
			}
			
			.hm-description {
				margin: 15px;
			}
			
			.hm-description>li {
				font-size: 14px;
				color: #8f8f94;
			}
		</style>
	</head>

	<body>

		<header id="header" class="mui-bar mui-bar-transparent">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">导航栏</h1>
		</header>
		<!--<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">标题</h1>
		</header>-->

		<div class="mui-content">

			<!--<img id="img1" src="../images/yuantiao.jpg"/>
			
			<div id="slider" class="mui-slider mui-hidden" >
			  <div class="mui-slider-group">
			    
			     <div class="mui-slider-item">
			      <a href="#">
			        <img src="../images/shuijiao.jpg">
			      </a>
			    </div>
			    
			    <div class="mui-slider-item">
			      <a href="#">
			        <img src="../images/yuantiao.jpg">
			      </a>
			    </div>
			  </div>
			  <div class="mui-slider-indicator">
			    <div class="mui-indicator mui-active"></div>
			    <div class="mui-indicator"></div>
			  </div>
			</div>-->
			<img id='img1' src="../images/qihoo.png" class="mui-hidden" />
			<div id="slider" class="mui-slider">
				<div class="mui-slider-group">
					<div class="mui-slider-item">
						<img src="../images/cbd.jpg" />
					</div>
					<div class="mui-slider-item">
						<img src="../images/cbd.jpg" />
					</div>
				</div>
				<div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>

			<h5 class="mui-content-padded">图片类型</h5>
			<!--<form class="mui-input-group" style="margin-bottom: 30px;">
				<div class="mui-input-row mui-radio">
					<label>静态图片</label>
					<input name="style" type="radio" checked value="static">
				</div>
				<div class="mui-input-row mui-radio">
					<label>轮播图</label>
					<input name="style" type="radio" value="slider">
				</div>
			</form>-->
			<div class="mui-table-view">
				<div class="mui-table-view-cell mui-radio">
					static
					<input type="radio" name="style" value="static">
				</div>

				<div class="mui-table-view-cell mui-radio">
					slider
					<input type="radio" name="style" checked value="slider">
				</div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			//			var slider = document.getElementById("slider");
			//			var img = document.getElementById("img1");
			//			mui('body').on('change', 'input', function() {
			//				//if (this.checked) {
			//					switch (this.value) {
			//						case 'static':
			//							img.className = "";
			//							slider.classList.add("mui-hidden");
			//							break;
			//						case 'slider':
			//							img.className = "mui-hidden";
			//							if(slider.classList.contains("mui-hidden")){
			//								slider.classList.remove("mui-hidden");
			//							}
			//							break;
			//					}
			//				//}
			//			});

			var slider = document.getElementById("slider");
			var img = document.getElementById("img1");
			mui('body').on('change', 'input', function() {
				switch(this.value) {
					case 'static':
						img.className = "";
						slider.classList.add('mui-hidden');
						break;
					case 'slider':
						img.className = 'mui-hidden';
						if(slider.classList.contains('mui-hidden')) {
							slider.classList.remove('mui-hidden');
						}
					default:
						break;
				}
			});
		</script>

	</body>

</html>